<template>
	<view class="devicecheck">
		<u-navbar title="故障报修" back-icon-color="#fff"
			:background="{backgroundImage: 'linear-gradient(45deg, #68dae7, #21a4b3)'}" title-color="#FFFFFF">
		</u-navbar>
		<view class="devicecheck-form">
			<u-form :model="checkInfo" ref="uForm" label-width="180rpx" >
				<u-form-item label="仪器序列号"><u-input style="background-color: #ccc;" v-model="serialNumber" disabled/></u-form-item>
				<u-form-item label="仪器序名称"><u-input v-model="deviceName" disabled/></u-form-item>
				<u-form-item label="申请人"><u-input v-model="applyPeople" disabled /></u-form-item>
				<u-form-item label="申请人手机号"><u-input v-model="checkInfo.applyPhone" placeholder=" "/></u-form-item>
				<u-form-item required label="报修原因">
					<u-input type="textarea" :height="240" v-model="checkInfo.applyReason" placeholder=" "/>
				</u-form-item>
			</u-form>
			<view class="devicecheck-form-img" >
				<view>故障照片</view>
				<u-upload ref="uUpload" :max-count="1" :action="action" @on-error="uploadError" @on-success="uploadSuccess" :header="uploadHeader" :auto-upload="false"></u-upload>
			</view>
		</view>
		<view class="devicecheck-submit">
			<view class="devicecheck-submit-btn" @tap="saveDeviceCheck">保存</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				sn:null,
				checkInfo:{},
				serialNumber:"",
				deviceName:"",
				applyPeople:uni.getStorageSync("userName"),
				action:uni.getStorageSync("baseUrl")+"/wx/upload",
				uploadHeader:{
					"Content-Type": "multipart/form-data",
					"token":uni.getStorageSync("token"),
				}
			}
		},
		onLoad(options) {
			this.sn = options.deviceSn
			this.getDeviceInfo()
		},
		methods:{
			getDeviceInfo(){
				let params = {
					sn:this.sn
				}
				this.$xt.api.deviceinfo(params).then(res=>{
					this.serialNumber = res.data.serialNumber
					this.deviceName = res.data.deviceName
					this.checkInfo.deviceName = res.data.deviceName
				})
			},
			saveDeviceCheck(){
				if(!this.checkInfo.applyReason){
					this.$refs.uToast.show({
						title:"请填写报修原因",
						duration:2000,
						type:"error"
					})
					return
				}
				let params = this.checkInfo
				params.serialNumber = this.serialNumber
				params.deviceName = this.deviceName
				params.applyPeople = this.applyPeople
				params.status = 1
				params.applyTime =  this.$xt.util.getNowTime()
				if(this.$refs.uUpload.lists.length>0){
					this.$refs.uUpload.upload()
				}else{
					this.saveInfo(params)
				}
			},
			uploadSuccess(data, index, lists, name){
				let params = this.checkInfo
				params.serialNumber = this.serialNumber
				params.deviceName = this.deviceName
				params.applyPeople = this.applyPeople
				params.status = 1
				params.applyTime =  this.$xt.util.getNowTime()
				params.applyPic= data.url
				this.saveInfo(params)
			},
			uploadError(data){
				this.$refs.uToast.show({
					title:data.msg,
					duration:2000,
					type:"error"
				})
			},
			saveInfo(params){
				this.$xt.api.deviceCheckAdd(params).then(res=>{
					this.$refs.uToast.show({
						title:res.msg,
						duration:2000,
						type:"success"
					})
					setTimeout(()=>{
						this.$u.route({type: 'back'})
					},1000)
				}).catch(res=>{
					this.$refs.uToast.show({
						title:res.msg,
						duration:2000,
						type:"error"
					})
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.devicecheck{
		position: relative;
		&-form{
			background-color: #fff;
			padding: 10rpx 24rpx;
			
		}
		&-submit{
			position: fixed;
			bottom: 10rpx;
			width: 100%;
			background-color: #fff;
			padding: 20rpx 40rpx;
			&-btn{
				text-align: center;
				background-color: #00aa00;
				color:#fff;
				padding: 10rpx 40rpx;
				border-radius: 15rpx;
			}
		}
	}
</style>